<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="modal-mask" ></div>
    <div class="head-container maxwidth">
      <!--      <div class="head-title">
              媒体报单
              <i class="el-icon-close"></i>
            </div> -->
      <el-form ref="form" :model="form" :rules="rules"  size="small" label-width="80px">
            <div style="text-align:center;vertical-align:middle;">
              <el-input v-model="form.orderNo"  style="width: 280px;margin: 0 auto;" placeholder="请输入上传的订单号" />
            </div>
      </el-form>
      <div slot="footer" class="dialog-footer" ref="addsu" >
        <el-button :loading="crud.status.cu === 2" type="primary" style="width: 280px;" @click="fsubmit">查询订单</el-button>
      </div>
      <comp v-if="nonedata"  style="width: 280px;text-align:center;vertical-align:middle;">
        <div  class="el-form-item-label" style="display: block;width: 270px;margin: 0 auto;text-align: center;margin-top: 40px;">
         查不到该订单号的记录
        </div>
      </comp>
      <comp v-if="showdata"  style="width: 280px;vertical-align:middle;">
        <div  class="el-form-item-label" style="display: block;width: 270px;margin: 0 auto;margin-top: 40px;text-align:left;">
          订单号：{{orderInfo.orderNo}}
        </div>
        <div  class="el-form-item-label" style="display: block;width: 270px;margin: 0 auto;text-align: left;">
          订单时间：{{orderInfo.orderTime}}
        </div>
        <div  class="el-form-item-label" style="display: block;width: 270px;margin: 0 auto;text-align: left;">
          订单金额：{{_fenToYuan('','',orderInfo.orderAmt)}}元
        </div>
        <div  class="el-form-item-label" style="display: block;width: 270px;margin: 0 auto;text-align: left;">
          跟单状态：{{_pipei(orderInfo.pipei)}}
        </div>
      </comp>


    </div>
  </div>

</template>


<script>
import orderAdd from '@/api/activity/activityDetails'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource) ;

const defaultForm = { id: null, activityId: null, orderNo: null, orderType: null, orderDate: null, orderTime: null, orderAmt: null, saleAmt: null, orderStatus: null, uid: null, orderUname: null, phone: null, createTime: null, lastUpdateTime: null, payType: null, payNo: null, pipei: null, extra1: null, extra2: null }
export default {
  name: 'orderAdd',
  components: { pagination, crudOperation, rrOperation, udOperation, VueResource },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: 'activity', url: 'api/activity/info', idField: 'id', sort: 'id,desc', crudMethod: { ...orderAdd }})
  },
  data() {
    return {
      uid:null,
      nonedata:false,
      orderInfo:{},
      showdata:false,
      paytype: [{value: '1', label: '微信' },{value: '2', label: '支付宝' },{value: '3', label: '银行卡' }],
      rules: {
        orderNo: [{ required: true, message: '订单编号不能为空', trigger: 'blur' }],
      }
    }
},
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    // [CRUD.HOOK.beforeRefresh]() {
    //   return true
    // },

    _fenToYuan(row, col, cellValue) {
      if (typeof cellValue === 'undefined' || cellValue === null || cellValue === '') {
        return '0'
      } else {
        var num = Number(cellValue)
        if (!num) {
          return num + '.00'
        } else {
          num = Math.round((num) * 100) / 10000
          num = num.toFixed(2)
          num += ''
          var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g
          return num.replace(reg, '$1,')
        }
      }
    },
    _pipei(val) {
      if ( val === '1') {
        return '已跟单'
      } else {
        return '未跟单'
      }
    },
    fsubmit(){
      this.crud.findVM('form').$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        var orderNo = this.form.orderNo
          this.$http.get("http://8.135.117.242:8083/api/order/getone?page=0&size=10&sort=id%2Cdesc&orderNo="+orderNo).then(function(res){
            if (res.body.content.length<1){
              this.nonedata = false ;
              this.showdata = false ;
              setTimeout(() => {
                this.nonedata = true ;
              }, 1);
              return
            }else{
              this.orderInfo = res.body.content[0] ;
              this.nonedata = false ;
              this.showdata = false ;
              setTimeout(() => {
                this.showdata = true ;
              }, 1);
              return
            }
          })
      })
    }
 },
  mounted() {
    let that = this;
  }
}
</script>
<style scoped lang="scss">
.app-container{
  padding: 0;
}
.head-title{
  padding-bottom: 33px;
  margin-top: -5px;
  overflow: hidden;
  i{
    float: right;
  }
}
.modal-mask{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 700px;
  opacity: .5;
  background: #000;
  z-index: -2002;
}
.maxwidth{
  width: 100%;
}
.head-container{
  // height: 580px; //有标题头部
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  bottom: 0;
  margin: auto;
  background: #ffffff;
  padding: 30px 20px;
  box-sizing: border-box;
}
.dialog-footer{
  text-align: center;
  margin-top: 12px;
}
@media (min-width: 576px){
  .maxwidth{
    width: 400px;
  }
}

</style>
